<template>

    <n-flex justify="center">
        <n-form label-placement="left" :label-width="200">
            <FormItemComponent v-for="(i, index) in strategy_list" :key="i.id" :title="'投资策略' + (index + 1) + '：'"
                tips="设置初始资金">
                <div class="flex w-120">

                    <n-popover trigger="manual" :show="show_popover">
                        <template #trigger>
                            <n-input @focus="autoInput" @blur="closeInput" placeholder="请输入投资策略..." v-model:value="i.description"
                                class=" mx-2" />

                        </template>
                        <div class="flex flex-col w-full">
                            <span>猜你想填：如果：《股票A》收盘价前1日上涨超过1.1%，那么：购买《股票A》100只</span>
                            <div class="w-full my-2 flex">
                                <div class="flex flex-grow"/>
                                <n-button @click="changeDescription(index)" type="primary">填充</n-button>
                            </div>
                        </div>
                    </n-popover>


                    <n-button @click="deleteStrategyItem(index)" class="mx-2">删除</n-button>
                </div>
                <n-button @click="addStrategyItem" v-if="index + 1 == strategy_list.length" type="primary">添加</n-button>
            </FormItemComponent>
        </n-form>
    </n-flex>
</template>


<script setup>

import { ref } from 'vue';
import { NButton } from 'naive-ui';
import FormItemComponent from '@/components/FormItemComponent.vue';

const props = defineProps(["strategy_list", "backtest_type"]);
const strategy_list = props.strategy_list;
const if_modal = ref(false);
const input_placeholder = ref('');
const show_popover = ref(false);
const autoInput = () => {
    setTimeout(function () {
        show_popover.value = true;
        // 这里是延迟执行的代码
    }, 500);
}

const changeDescription = (index) => {
    strategy_list[index].description = "如果：《股票A》收盘价前1日上涨超过1.1%，那么：购买《股票A》100只";

}
const closeInput = () => {
    show_popover.value = false;
   
}
const backtest_type = props.backtest_type;

// '如果：该股票前1日上涨超过1.1%，那么：购买该股票100只'
// '如果：浪潮信息开盘价前1日上涨超过1.1%，那么：购买浪潮信息100只'

const deleteStrategyItem = (index) => {
    strategy_list.splice(index, 1)
}
const addStrategyItem = () => {
    strategy_list.push({
        description: ''
    });
}
</script>